<template>
    <div class="divShow">
        <el-row>
            <el-col :span="24">
                <div style="padding: 30px;">
                    <!-- 搜索框 -->
                    <el-form :inline="true" :model="searchWmsUseList" class="demo-form-inline" v-if="showSearch">
                        <el-form-item label="仓库编码">
                            <el-input v-model="searchWmsUseList.warehouseCode" placeholder="请输入仓库编码"></el-input>
                        </el-form-item>
                        <el-form-item label="仓库名称">
                            <el-input v-model="searchWmsUseList.warehouseName" placeholder="请输入仓库名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="checkWmsUse">查询</el-button>
                            <el-button @click="cleanWmsUse">重置</el-button>
                        </el-form-item>
                    </el-form>


                    <el-row>
                        <el-col :span="22">
                            <!-- 按钮 -->
                            <el-button type="primary" size="small" @click="changeDialog(null)">新增</el-button>
                            <el-button type="success" size="small" :disabled="!judgmentCh"
                                @click="changeDialog(SelWmsUseId)">修改</el-button>
                            <el-button type="danger" size="small" :disabled="!judgmentDe"
                                @click="delMdItemIdArray(arrayWmsUseId)">删除</el-button>
                        </el-col>
                        <el-col :span="2">
                            <div>
                                <el-tooltip content="隐藏搜索" placement="top">
                                    <el-button icon="el-icon-search" circle @click="toggleSearch"></el-button>
                                </el-tooltip>
                                <el-tooltip content="刷新" placement="top">
                                    <el-button icon="el-icon-refresh" circle @click="refresh"></el-button>
                                </el-tooltip>
                            </div>
                        </el-col>
                    </el-row>



                    <!-- 表格 -->
                    <el-table :data="productTable" style="width: 100%;" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="warehouseId" label="仓库Id" v-if="false">
                        </el-table-column>
                      <el-table-column label="仓库编号" width="180">
                        <template slot-scope="scope">
                          <!-- 使用内联样式设置字体颜色为浅蓝色，并添加点击事件 -->
                          <span style="color: #87CEEB; cursor: pointer;" @click="handleWarehouseCodeClick(scope.row.warehouseId)">
            {{ scope.row.warehouseCode }}
    </span>
                        </template>
                      </el-table-column>
                        <el-table-column prop="warehouseName" label="仓库名称">
                        </el-table-column>
                        <el-table-column prop="location" label="位置">
                        </el-table-column>
                        <el-table-column prop="area" label="面积">
                            <template slot-scope="scope">
                                {{ scope.row.area }} ㎡
                            </template>
                        </el-table-column>
                        <el-table-column prop="charge" label="负责人">
                        </el-table-column>
                        <el-table-column prop="enableFlag" label="是否冻结">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.enableFlag === 'Y'">是</el-tag>
                                <el-tag v-else type="danger">否</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" width="180">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-col :span="12">
                                    <el-link type="primary" @click="getWmsOutList(scope.row.warehouseId)">库区</el-link>
                                </el-col>
                                <el-col :span="12">
                                    <el-link type="primary" @click="changeDialog(scope.row.warehouseId)">修改</el-link>
                                </el-col>
                                <el-col :span="12">
                                    <el-link type="primary" @click="delDialog(scope.row.warehouseId)">删除</el-link>
                                </el-col>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页模块 -->
                    <el-pagination :page-size="searchWmsUseList.pageSize" :total="searchWmsUseList.total"
                        @current-change="searchProductChange" layout="prev, pager, next">
                    </el-pagination>

                    <!-- dialog -->
                    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="60%" class="rounded-dialog"
                        :close-on-click-modal="false" @close="closeMdItemDialog">
                        <el-form :model="AddWmsUseList" ref="AddWmsUseList" :rules="rules" style="padding-left:50px;">

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="仓库编码" prop="warehouseCode">
                                        <el-input v-model="AddWmsUseList.warehouseCode" autocomplete="off"
                                            style="width: 180px;" placeholder="请输入仓库编码"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="仓库名称" prop="warehouseName">
                                        <el-input v-model="AddWmsUseList.warehouseName" autocomplete="off"
                                            style="width: 180px;" placeholder="请输入仓库名称"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                <el-form-item label="负责人" prop="charge">
                                    <el-input v-model="AddWmsUseList.charge" autocomplete="off" style="width: 180px;"
                                        placeholder="请输入负责人"></el-input>
                                </el-form-item>
                            </el-col>
                            </el-row>
                            <el-row style="padding-top: 20px;">
                                <el-col :span="24">
                                    <el-form-item label="面积" prop="area">
                                        <el-input-number v-model="AddWmsUseList.area"
                                            label="请输入面积"></el-input-number>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row style="padding-top: 20px;">
                                <el-col :span="24">
                                    <el-form-item label="位置" prop="location">
                                        <el-input v-model="AddWmsUseList.location" type="textarea" :rows="2"
                                            autocomplete="off" style="width: 640px;" placeholder="请输入位置"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row style="padding-top: 20px;">
                                <el-col :span="24">
                                    <el-form-item label="备注" prop="remark">
                                        <el-input v-model="AddWmsUseList.remark" type="textarea" :rows="2"
                                            autocomplete="off" style="width: 640px;" placeholder="请输入备注"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="closeMdItemDialog">取 消</el-button>
                            <el-button type="primary" @click="submitForm('AddWmsUseList')">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>

    </div>
</template>
<script>
import axios from 'axios';
import { getMaxListeners } from 'node-notifier';
import qs from 'qs';
export default {
    data() {
        return {
            // 设置dialog默认不显示
            dialogFormVisible: false,
            //根据是否有id输入判断标题
            dialogTitle: '',
            // 分页查询数据
            searchWmsUseList: {
                warehouseCode: '',
                warehouseName: '',
                pageSize: 5,
                pageNo: 1,
                total: 0,
            },
            // 查询显示表格
            productTable: [],
            //新增MdItem或者修改MdItem
            AddWmsUseList: {
                warehouseId:1,
                warehouseCode: '',
                warehouseName: '',
                area: 1,
                remark: '',
                location: '',
                charge: ''
            },
            // 验证规则
            rules: {
                warehouseCode: [
                    { required: true, message: '请输入仓库编码', trigger: 'blur' }
                ],
                warehouseName: [
                    { required: true, message: '请输入仓库名称', trigger: 'blur' }
                ],
                location: [
                    { required: true, message: '请输入位置', trigger: 'blur' }
                ],
                area: [
                    { required: true, message: '请输入面积', trigger: 'blur' }
                ],
                charge: [
                    { required: true, message: '请输入负责人', trigger: 'blur' }
                ],
                remark: [
                    { required: false, message: '请输入备注', trigger: 'blur' }
                ]
            },
            selectedRows: [],
            judgmentCh: false,
            judgmentDe: false,
            //当前选中行的MdItemId的数组
            arrayWmsUseId: [],
            // 获取当前选中行的MdItemId
            SelWmsUseId: '',
            showSearch: true, // 控制搜索框的显示和隐藏
        }
    },

    mounted() {
        this.checkWmsUse();
    },
    methods: {
        //刷新按钮
        refresh() {
            location.reload();
        },
        //是否显示搜索框
        toggleSearch() {
            // 切换搜索框的显示和隐藏
            this.showSearch = !this.showSearch;
        },
        //获取当前选中表格行的状态
        handleSelectionChange(selection) {
            this.selectedRows = selection;
            console.log(this.selectedRows);

            if (selection.length === 1) {
                //获取单个id
                this.SelMdItemId = this.selectedRows[0].itemId
                console.log(this.SelMdItemId);

                this.judgmentDe = true;
                this.judgmentCh = true;
            } else if (selection.length > 1) {
                //获取一组id
                let rowsLength = this.selectedRows.length
                for (let index = 0; index < rowsLength; index++) {
                    this.arrayMdItemId[index] = this.selectedRows[index].itemId;
                }
                this.judgmentCh = false;
                this.judgmentDe = true;
            } else {
                this.judgmentCh = false;
                this.judgmentDe = false;
            }
        },
      handleWarehouseCodeClick(warehouseId){
        this.dialogFormVisible = true
        this.dialogTitle = "查看仓库"
        this.AddWmsUseList.warehouseId = warehouseId
        this.checkWmsById(warehouseId);
      },
        //根据传递进来的MdItemId数组来进行批量删除
        delMdItemIdArray(arrayMdItemId) {
            this.$confirm('确定要删除这批信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let qsArrayMdItemId = qs.stringify(arrayMdItemId);
                console.log(arrayMdItemId);
                console.log(qsArrayMdItemId);
                const pureArray = JSON.parse(JSON.stringify(arrayMdItemId));
                console.log(pureArray);

                this.$axios.delete("http://localhost:9970/emsSystem/api/MdItem/delMdItemArray", { data: arrayMdItemId }).then((res) => {
                    if (res.data.code === 200) {
                        //删除成功
                        this.$message.success("删除成功");
                        this.checkListMdItem();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //根据id删除指定数据
        delDialog(mdItemId) {
            this.$confirm('确定要删除该条信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.delete("http://localhost:9970/emsSystem/api/MdItem/delMdItem/" + mdItemId).then((res) => {
                    if (res.data.code === 200) {
                        //删除成功
                        this.$message.success("删除成功");
                        this.checkListMdItem();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //关闭dialog并且清空里面的数据
        closeMdItemDialog() {
            this.$refs.AddWmsUseList.resetFields();
            this.dialogFormVisible = false
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 表单验证通过，执行提交操作
                    this.addWmsUseList();
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        },
        //添加或者修改MdItem
        addWmsUseList() {

            let qsMdItem = qs.stringify(this.AddWmsUseList);
            console.log(qsMdItem);
            this.$axios.post("http://localhost:9970/emsSystem/api/was/edit", qsMdItem).then((res) => {
                if (res.data.code === 200) {
                    //修改成功
                    this.$message.success("修改或新增成功");
                    this.dialogFormVisible = false;
                    this.checkListWmsUse();
                }
            })
        },
        //改变dialog显示状态
        changeDialog(warehouseId) {
            this.dialogFormVisible = true
            if (warehouseId == null) {
                this.dialogTitle = "新增物料/产品"
            } else {
                console.log(warehouseId);
                this.dialogTitle = "修改物料/产品"
                this.AddWmsUseList.warehouseId = warehouseId
                this.checkWmsById(warehouseId);
            }
        },
      getWmsOutList(warehouseId){
        localStorage.setItem('warehouseId', warehouseId);
        this.$router.push('/WmsStoList');
      },
        //根据mdItemId查询数据
        checkWmsById(warehouseId) {
            this.$axios.post("http://localhost:9970/emsSystem/api/was/editList/" + warehouseId).then((res) => {
              console.log(warehouseId)
                if (res.data.code === 200) {
                    this.AddWmsUseList = res.data.data
                }
            })
        },
        // 改变页码
        searchProductChange(value) {
            this.searchWmsUseList.pageNo = value;
            this.checkListMdItem();
        },
        // 进行条件搜索
        checkWmsUse() {
            this.checkListWmsUse();
        },
        // 清空搜索框
        cleanWmsUse() {
            this.searchProduct.itemCode = ""
            this.searchProduct.itemName = ""
        },
        // 查询MdItem数据方法
        checkListWmsUse() {
            let qsStr = qs.stringify(this.searchWmsUseList);
            const parsedData = qs.parse(qsStr);
            let jsonStr = JSON.stringify(parsedData);
            console.log(jsonStr);
            this.$axios.post("http://localhost:9970/emsSystem/api/was/list", jsonStr,{
              headers: {
                'Content-Type': 'application/json' // 明确指定 Content-Type 为 application/json
              }
            }).then((res) => {
                if (res.data.code === 200) {
                    this.productTable = res.data.data.records
                    this.searchWmsUseList.pageNo = res.data.data.current
                    this.searchWmsUseList.pageSize = res.data.data.size
                    this.searchWmsUseList.total = res.data.data.total
                }else{
                  if (res.data.code === 510) {
                    this.$message.error("没有权限")
                    location.go(-1);
                  }
                }
            })
        }
    }
}
</script>
<style>
.divShow {
    background-color: white;
    border-radius: 10px;
}

.rounded-dialog .el-dialog {
    border-radius: 10px;
    /* 设置圆角 */
}
</style>
